﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Main.Master" CodeBehind="$safeitemrootname$_Add.aspx.cs" Inherits="$rootnamespace$.$safeitemrootname$_Add" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

    <!-- apiCheck is used by formly to validate its api -->
    <script src="//rawgit.com/kentcdodds/apiCheck.js/latest/dist/api-check.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>

    <!-- This is the current state of master for formly core. -->
    <script src="//rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
    <!-- This is the current state of master for the bootstrap templates -->
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/latest/dist/angular-formly-templates-bootstrap.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/it.js"></script>
      
    <script src="Scripts/Formly/FormlyHelper.js"></script>

    <title>Add new Item</title>

      <style>
          body {
            margin: 20px
          }

          .formly-field {
            margin-bottom: 16px;
          }
      </style>
</head>

<body ng-app="formlyExample" ng-controller="MainCtrl as vm">

    <h1>Add new Item<br /><hr /></h1>
    <div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
        <strong>Loading...</strong>
    </div>
    <div ng-if="vm.loadingData.$$status.state !== 0">
        <form ng-submit="vm.onSubmit()" novalidate>
            <formly-form model="vm.model" fields="vm.fields" form="vm.form">
            <button type="sumbit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Submit</button> <!-- ng-click="ok()" -->
            </formly-form>
        </form>
    </div>

</body>

    <script>

        AddData('api/formly/LoadFields', 'api/Formly/AddData');

        /* global angular */
        function AddData(loadUrl, sendUrl) {

            'use strict';

            //
            var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'FormlyNET'], function config(formlyConfigProvider, CustomTypesProvider) {
                formlyConfigProvider.setType(CustomTypesProvider.getTypes());
            });

            app.controller('MainCtrl', function MainCtrl($http, $scope, CustomTypes, FieldsService) {
                var vm = this;

                // funcation assignment
                vm.onSubmit = onSubmit;

                vm.model = {};

                // Note, normally I prefer to use the router and resolve
                // async dependencies into my controller, but I think
                // this gives you the idea of what you're supposed to do...  api/formly/
                // if url is webform webmethod: 'TestFormly2.aspx/LoadData' -> POST -> JSON.parse(result.data.d)
                // if uel is Web APi controller: api/formly/LoadFields -> GET -> JSON.parse(result.data)
                vm.loadingData = FieldsService.getFields(loadUrl).then(function (result) {

                    vm.fields = JSON.parse(result.data);

                    vm.originalFields = angular.copy(vm.fields);
                });

                $scope.ShowDatepicker = function () {
                    datepicker.open($event)
                }

                function onSubmit() {
                    var data = JSON.stringify(vm.model);
                    alert(data, null, 2);

                    $http.post(sendUrl, data).then(function successCallback(response) {
                        alert(response.data);

                        //Then on the button in the iFrame, call this on client click: 
                        window.parent.parent.dialogClose();

                    }, function errorCallback(response) {
                        // called asynchronously if an error occurs
                        // or server returns response with an error status.
                        if (respose.status != 200) {
                            if (response.data == '') {
                                alert(response.data);
                            } else {
                                alert(response.statusText);
                            }
                        }
                    });

                    //$http.post({
                    //    method: 'POST',
                    //    url: 'api/Formly/SendData',
                    //    data: data,
                    //    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                    //});
                }
            });
        };

    </script>
</html>
